<template>
    <div>
        
        <div class="bg_log">
            <img src="@/assets/img/bg_log in@2x.png" alt="">
        </div>
        
        
        <div class="info_cell">
            <img src="@/assets/img/icon_password@2x.png" alt="">
            <input placeholder="请输入密码长度至少8位" v-model="pwd" type="password">
            <div class="del">
                <img src="@/assets/img/delete@2x.png" alt="" v-if="pwd.length>0" @click="emptyPwd1">
            </div>

        </div>
        <div class="info_cell">
            <img src="@/assets/img/icon_password@2x.png" alt="">
            <input placeholder="请再次输入密码" v-model="repwd" type="password">
            <div class="del">
                <img src="@/assets/img/delete@2x.png" alt="" v-if="repwd.length>0" @click="emptyPwd2">
            </div>

        </div>
        
        <div class="registerBtn" @click="resetPassword">
            确认
        </div>

    </div>
</template>
<script>
    import {updatePwd} from '@/api/api'
    // import { getToken  } from "@/api/auth";
    export default {
        
        data() {
            return {
                pwd: "",
                repwd: "",
                myreg : /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            }
        },
        created() {
        },
        methods: {
            resetPassword(){
                const data={
                    password:this.pwd,
                    // token:getToken(),
                    phone:window.localStorage.getItem("phone")
                }
                if(this.pwd===this.repwd){
                    updatePwd(data).then(res => {
                    if (res.code == 200) {
                        this.$vux.toast.show("重置成功")
                        this.$router.replace({path:'/'})
                    }
                })
                }else{
                    alert("两次密码输入不一致")
                }
            },
            emptyPwd1() {
                this.pwd = ""
            },
            emptyPwd2() {
                this.repwd = ""
            },
            
        },
    }
</script>
<style scoped>
    .bg_log {
        width: 100%;
        height: 9.375rem;
        margin-bottom: 1.8125rem;
    }

    .bg_log img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .info_cell {
        display: flex;
        align-items: center;
        width: calc(100% - 3.75rem);
        padding: 1.125rem 0px;
        margin: 0px 1.875rem;
        border-bottom: 0.0625rem solid #E7ECF5;

    }

    .info_cell_code {
        justify-content: space-between;
    }

    .info_cell_code span {
        width: 5.125rem;
        height: 1.875rem;
        border: 1px solid rgba(87, 154, 255, 1);
        border-radius: 0.25rem;
        font-size: 0.8125rem;
        margin-left: 0.75rem;
        color: #579AFF;
        line-height: 1.875rem;
        text-align: center;
    }


    .info_cell input {
        border: none;
        width: calc(100% - 3.0625rem);
        padding: 5px 0px;
        font-size: 0.9375rem;
        outline: none;
    }

    .info_cell img:nth-of-type(1) {
        display: block;
        width: 0.9375rem;
        height: 1.25rem;
        margin-right: 15px;
        object-fit: contain;
    }

    .info_cell .del {
        width: 1.1875rem;
        height: 1.1875rem;
    }

    .info_cell .del>img {
        display: block;
        width: 1.1875rem;
        height: 1.1875rem;
    }

    .notic {
        padding: 1.625rem 0rem;
        text-align: center;
        font-size: 0.75rem;
        color: #949FB4;
    }

    .notic>span {
        color: #448EFF;
    }

    .registerBtn {
        width: 14.375rem;
        height: 2.75rem;
        background: linear-gradient(90deg, rgba(68, 142, 255, 1) 0%, rgba(102, 163, 255, 1) 100%);
        border-radius: 0.1875rem;
        text-align: center;
        line-height: 2.75rem;
        color: #fff;
        font-size: 1.125rem;
        margin: 0px auto;
        margin-top: 4.3125rem;
    }
</style>